define(function (require, exports, module) {  
    var FolderTree = require("./FolderTree");
    var DocumentItem = React.createClass({
        getInitialState: function() {           
            var node = this.props.node;
            return {              
                selected: node.state && node.state.hasOwnProperty('selected') ?
                    node.state.selected : false             
            };
        },
        clickAddPath: function(){
            this.props.documentList.curNode = this;
            $("#filing-to").modal("show");
        },
        addPath: function(selectedFolder){
            var _this = this;
            this.props.node.path = [];
            _.each(selectedFolder, function(folder){
                _this.props.node.path.push({id: folder.id, path: folder.path});
            });                      
            this.forceUpdate(); 
        },
        triggerSelected: function(event, selected){          
            if (typeof(selected) === 'undefined') {
                selected = !this.state.selected;
            }
            if (selected) {
                this.props.documentList.addSelectedDocument(this.props.node);
            } else {
                this.props.documentList.removeSelectedDocument(this.props.node);
            }
            this.setState({selected : selected});                  
        },

        componentWillReceiveProps : function(nextProps) {       
            this.triggerSelected(null, false);   
        },
        render: function(){            
            var node = this.props.node;           
            var selectedNode = node.path;          
            var path = [];
            var _this = this;
            if (!selectedNode){
                path.push(<p style={{margin:0}}>&nbsp;<a href="#" onClick={this.clickAddPath} className="fa fa-plus-square-o"></a></p>)
            }
            else{
                selectedNode.forEach(function(node, i){
                    if (i == selectedNode.length - 1)  {
                        path.push(<p style={{margin:0}}>{node.path}&nbsp;<a href="#" onClick={_this.clickAddPath} className="fa fa-plus-square-o"></a></p>);
                    }  
                    else{
                        path.push(<p style={{margin:0}}>{node.path} </p>); 
                    }
                })
            }
          
            return (
                <tr>
                <td><input type="checkbox" onChange={this.triggerSelected} checked={this.state.selected} value=""></input></td>
                <td>{node.time}</td>
                <td>{node.owner}</td>
                <td>{node.name}</td>
                <td>{path}
                </td>
                <td className="text-center">
                    <a className="fa fa-pencil"></a>
                </td>
                </tr>
           )
        }
    });

    var PendingFilingTable = React.createClass({
        selectedDocument : {},
        getInitialState: function () {
            return {};
        },
        componentDidMount: function() {
            var _this = this;
            $('#filing-to').on('show.bs.modal', function() {
                CMISService.getFolderTree().done(function(data) {
                    ReactDOM.render(React.createElement(FolderTree, {
                        data: data,
                        option: {
                            style: 'tree-plus-minus',
                            singleSelect: false,
                            id: 'filling-to-tree',
                            enableSelect: true
                        }
                    }), $("#filing-to .model-nav-list-box")[0]);
                });
            })
            .on('click', '.btn-warning', function(event, data) {         
                var selectedNode = $("#filling-to-tree").data("getSelectedNode")();               
                if (selectedNode.length > 0) {     
                    _this.curNode.addPath(selectedNode);                                     
                    $('#filing-to').modal('hide');
                }
            });

            $(ReactDOM.findDOMNode(this)).data("getSelectedDocument", function(){              
                return _.values(this.selectedDocument);                    
            }.bind(this));
            var $element = $(ReactDOM.findDOMNode(this));
            $element.find("tbody tr td input:checkbox").on('change', function() {
                var length = $element.find("tbody tr td input:checked").length;
                if (length == 0){
                    $element.find("#checkAll").attr("checked", false);
                }
                if (length == _this.props.data.length){
                    $element.find("#checkAll").attr("checked", true);
                }
            });
        },
        checkAll: function(e) {           
            _.each(this.refs, function(value){
               value.triggerSelected(null, $(e.target).is(':checked'));
            })            
        },
        addSelectedDocument: function(node){
            this.selectedDocument[node.id] = node;
        },
        removeSelectedDocument: function(node){
            delete this.selectedDocument[node.id];
        },
        render: function () {
            var data = this.props.data; 
            var header = [];      
            var body = [];
            header = (
                <tr><th><input id="checkAll" onChange={this.checkAll} type="checkbox" value=""></input></th><th>提交日期</th><th>提交者</th><th>文档名称</th><th>归档位置</th><th className="text-center">文档标引</th></tr>
                )
            if (data) {
                var _this = this;
                _.each(data, function (node) {
                    body.push(<DocumentItem ref= {node.id} node={node} key={node.id} documentList={_this}></DocumentItem>)                   
                });
            }          
            var table = (
                <table className = "table table-striped scroll_auto_y">
                 <thead>{header}</thead>
                 <tbody>{body}</tbody>             
                </table>
                )    
            return (
                <div className = "table-responsive">            
                    {table}
                </div>
            )
        }
    });
    return PendingFilingTable;
})